<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>定位后规划线路</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script src="./js/zepto.min.js"></script>
    <style>
        *{
            box-sizing: border-box;
        }
        .footer span{
            width: 33.3%;
            display: inline-block;
            text-align: center;
            border-top: 1px solid silver;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
        }
        .footer span:nth-child(2){
            border-left: 1px solid silver;
            border-right: 1px solid silver;
        }
        .footer i {
            display: inline-block;
            position: relative;
            top: 14px;
            background-image: url(./img/route-icon.png);
            background-repeat: no-repeat;
        }
        #driving i {
            width: 14px;
            height: 15px;
            background-position: 0 -68px;
        }
        #driving.active i {
            width: 14px;
            height: 15px;
            background-position: 0 -84px;
        }
        #bus i {
            width: 13px;
            height: 15px;
            background-position: 0 -34px;
        }
        #bus.active i {
            width: 13px;
            height: 15px;
            background-position: 0 -51px;
        }
        #riding i {
            width: 18px;
            height: 15px;
            background-position: 0 -138px;
        }
        #riding.active i {
            width: 18px;
            height: 15px;
            background-position: 0 -157px;
        }
    </style>
    <script type="text/javascript"
            src='https://webapi.amap.com/maps?v=1.3&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Transfer,AMap.Riding,AMap.Autocomplete,AMap.Driving&key=9ffe42e17300a715aebd32d0ba66b55a'></script>
</head>
<body>
<div style="width:100%;height:100%;position:absolute;overflow:hidden">
    <div class='wrap' style="width:200%;height:100%;position:absolute">
        <div class='left'>
            <header class='title top' style="line-height: 41px"><span>请点击酒店定位选择导航</span>
                <input style="position:absolute;top:4px;right: 10px;width:15%;background-color:#00a2d4;color:white;border-radius: 3px"
                       class="goBack" type="button" value="返回" onclick="history.go(-1)">
            </header>
            <div class='info top'>
            </div>
            <div id="container" class="map" tabindex="0"></div>
            <div class='bottom start'>
                <img src="./images/hotNew.png"/>
                <div class='bottomright'>
                    <div id='origin'>你的位置</div>
                </div>
            </div>
            <!--<div class='bottom end'  >-->
            <!--<img src="./images/hotNewRed.png" />-->
            <!--<div class='bottomright' >-->
            <!--<div id='destination' >你要去哪儿</div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="footer" style="width: 100%;position: absolute;bottom: 0;height: 48px;line-height: 48px;"><span data-plan="driving" id='driving'><i></i></span><span id='bus' data-plan="transfer"><i></i></span><span data-plan="riding" id='riding'><i></i></span></div>
        </div>
        <div class='right'>
            <header class='title top'>
                <a href='javascript:void(0)' id='back'>返回</a>
                <div>地点搜索</div>
            </header>
            <div class='top' style='height:40px;'>
                <div style='margin-top:2px'>
                    <input id='search' value=''/>
                </div>
                <img id='searchButton' src="./images/search.gif"/>
            </div>
            <div id="searchResult"></div>
        </div>
        <div id='locating' style='display:none'>
            <img src='./images/loading.gif'/><div>定位中,请稍候...</div>
        </div>
    </div>
</div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //根据浏览器所在地址定位
        dragEnable: true,
        zoom: 11
    });
</script>
<script type="text/javascript" src='./js/locate.js'></script>
<script type="text/javascript" src='./js/search.js'></script>
<script type="text/javascript">
    // 給地图添加缩放工具条,默认显示在右下角
    var toolBar = new AMap.ToolBar({});
    map.addControl(toolBar);

    window.starCurPos = [];
    window.endCurPos = [];
    var startMarker = new AMap.Marker({
        content: "<img style='width:19px;height:32px' src='./images/starts.png'/>",
        offset: new AMap.Pixel(-10, -32),
    })
    var wrap = document.getElementsByClassName('wrap')[0];
    //显示控制，执行后显示地图页面
    var showLeftView = function () {
        AMap.event.removeListener(placeSearch.listElementClickHandler);
        AMap.event.removeListener(autoComplete.selectHandler);
        placeSearch.clear();
        wrap.className = 'wrap';
    }
    //           显示控制，执行后显示搜索页面
    var showRightView = function (onShowed) {
        $(".poi-title .poi-more").remove();
        wrap.className = 'wrap rightShow';
    }
    //点击返回，页面由搜索页面返回显示页面
    AMap.event.addDomListener(document.getElementById('back'), 'click', showLeftView);

    console.log(sessionStorage.getItem("curAdress"));
    var curPlace = sessionStorage.getItem("curAdress") + sessionStorage.getItem("curHotel") ;
    console.log(curPlace);
    var infoWindow;
    var PlaceSearch = new AMap.PlaceSearch();
    startLocate(function () {
        PlaceSearch.search(curPlace, callbacko)
    })
    //关键字查询
    var driving = new AMap.Driving({
        map: map,
        hideMarkers: true
    });
    var transfer = new AMap.Transfer({
        map:map,
        hideMarkers: true,
        city:sessionStorage.getItem("curCity"),
        policy: AMap.TransferPolicy.LEAST_TIME
    });
    var riding = new AMap.Riding({
        hideMarkers: true,
        map: map
    });

    window.curPlanArr = [driving,transfer,riding];


    function callbacko(status, result) {
        if(result.info == "OK"){
            var result = result.poiList.pois[0];
            map.setZoomAndCenter(13, [result.location.lng, result.location.lat]);
            endCurPos = [result.location.lng, result.location.lat];
            addMarker([result.location.lng, result.location.lat],
                    result.name, result.tel.split(";")[0], result.address
            );
            enableSearch();
            if(starCurPos.length != 0 && endCurPos.length !=0){
                curPlanArr[0].search(starCurPos,endCurPos,function (status,result) {
                    if( status != "complete"){
                        showTip("导航失败，请选择其他出行方式");
                        $(".info").addClass("showOnce");
                    }
                    startMarker.setMap(map);
                    startMarker.setPosition(starCurPos);
                });
                $("#driving").addClass("active");
            }
        }
    }
    function addMarker(pos, name, tel, adress) {
        map.clearMap();
        var marker = new AMap.Marker({
            map: map,
            content: "<img style='width:19px;height:32px' src='./images/jiuping.png'/>",
            position: pos
        });
        marker.setMap(map);
        openInfo(name, tel, adress);
        infoWindow.open(map, marker.getPosition());
        //鼠标点击marker弹出自定义的信息窗体
//                infoWindow.open(map, marker.getPosition())
        AMap.event.addListener(marker, 'click', function () {
//            console.log(marker.getPosition());
            infoWindow.open(map, marker.getPosition());
        });
    }

    //在指定位置打开信息窗体
    function openInfo(name, tel, adress) {
        //构建信息窗体中显示的内容
        var info = [];
//               info.push("<div><div></div> ");
        info.push("<div><div style=\"padding:0px 0px 0px 4px;\"><b>" + name + "</b>");
        info.push("电话 :" + tel);
        info.push("地址 :" + adress + "</div></div>");
        infoWindow = new AMap.InfoWindow({
            content: info.join("<br/>"),  //使用默认信息窗体框样式，显示信息内容
            offset: new AMap.Pixel(0, -29)
        });
        infoWindow.open(map, map.getCenter());
    }
    var curIndex = 0;
    $(document).on("click",".footer span",function () {
        $(this).addClass("active").siblings().removeClass("active");
        var curPlanindex = $(this).index();
        if(curPlanindex == curIndex || $(this).find("span").hasClass("sending")){
            return
        }
        $("#locating div").show().text("导航中...请稍等");
        $(".footer span").addClass("sending");
        if(starCurPos.length != 0 && endCurPos.length !=0) {
            curPlanArr[curIndex].clear();
            curPlanArr[curPlanindex].search(starCurPos, endCurPos,function (status,result) {
                if( status != "complete"){
                    showTip("导航失败，请选择其他出行方式");
                    $(".info").addClass("showOnce");
                }
                $("#locating div").hide();
                $(".footer span").removeClass("sending");
                startMarker.setMap(map);
                startMarker.setPosition(starCurPos);
            });
            curIndex = curPlanindex;
        }
    })

</script>

</body>
</html>